웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[HTML5] Mark tag를 사용하기, highlighted or marked text
Last Modified : 2016-06-20 / Created : 2016-06-19스타일을 강조하기 위한 방법으로 mark태그를 사용할 수 있다. mark 태그는 간단하게 해당 텍스트에 하이라이트 효과를 주며 백그라운드 색상을 가지게 된다. 물론 우리가 잘 알드시 요소에 스타일을 부여하는 경우 css를 사용하는 방법이 더 효과적이다. 그래야만 나중에 서버, 프론트, 디자인 등등의 업무를 분업화하여 협업할 때 용이하기 때문이다. 하지만 사실 mark태그 외에도 더 많은 스타일 태그등이 존재한다. 이들은 무조건 쓰지 않는 것이 과연 정답일까?
반드시 사용하지 않아야할 이유는 없을 것 같다. 다만 태그를 사용하되 시맨틱 태그로써 스타일이 아닌 강조된 콘텐츠 영역임을 인지하기 위한 용도로 사용하는 것이 가장 좋을 것 같다. 물론 기존의 스타일 역시 그대로 사용하지 말고 css를 함께 사용한다면 태그와 스타일 모두 효과적으로 사용할 수 있을 것이라 생각한다.
! mark 태그 예제보기
아래는 특정 본문의 일부 내용이다. 중요한 부분의 텍스트를 mark태그를 사용하여 하이라이트 되도록 강조하고 이에 css를 사용 스타일을 부여하였다. 그럼 아래 코드를 살펴보자.
<style>
mark {
background: #fcc;
}
</style>
<div class="article">
웹이즈프리 주소는 다음과 같습니다. <mark>http://webisfree.com</mark>
</div>
mark {
background: #fcc;
}
</style>
<div class="article">
웹이즈프리 주소는 다음과 같습니다. <mark>http://webisfree.com</mark>
</div>
위 코드를 실행한 결과는 아래와 같습니다.
웹이즈프리 주소는 다음과 같습니다. http://webisfree.com
이처럼 강조하기 위한 경우 mark 태그를 사용하며 사용한 mark 태그와 함께 css를 사용해 스타일을 지정해주는 것이 좋은 방법이겠습니다.
mark태그처럼 스타일과 관련된 태그는 무엇이 있을까요? <font> <b> <i> <em> <strong> 등등의 태그가 스타일과 관련된 태그들 입니다.
아래의 글도 찾고 계시지 않나요?
